<template>
    <div class="diskinfo-main">
        <div class="chart">
            <vue-echarts :option="echartOption" class="diskinfo-chart"/>
        </div>
        <div class="disklist">
            <span v-for="disk in diskIds" :key="disk" :class="disk.id === curDiskId ? 'active' : ''" @click="curDiskId = disk.id"> {{ disk.id }} <div> {{ disk.total }} GB</div> </span>
        </div>
    </div>
</template>

<script>
import {
    reactive,
    toRefs,
    onMounted,
    computed,
    watch
} from "vue";
import VueEcharts from "@/components/scEcharts";

export default {
    name: "DiskInfo",
    components: {
        VueEcharts
    },

    setup() {
        let allDiskInfo = null;
        const state = reactive({
            diskInfo: null,
            curDiskId: '',
            diskIds: []
        });

        onMounted(async () => {
            await getDiskInfo();
        });

        const echartOption = computed(() => {
            return {
                backgroundColor: "",
                title: {
                    text: state.diskInfo ? state.diskInfo.id : '',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: '#235894'
                    }
                },
                tooltip: {
                    formatter: '{c}MB',
                },
                series: [
                    {
                    type: 'pie',
                    selectedMode: 'single',
                    selectedOffset: 30,
                    clockwise: true,
                    label: {
                        formatter: '  {b|{b}：}{c}MB  {per|{d}%}  ',
                        backgroundColor: '#F6F8FC',
                        borderColor: '#8C8D8E',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            b: {
                                color: '#4C5058',
                                fontSize: 14,
                                fontWeight: 'bold',
                                lineHeight: 33
                            },
                            per: {
                                color: '#fff',
                                backgroundColor: '#4C5058',
                                padding: [3, 4],
                                borderRadius: 4
                            }
                        }
                    },
                    labelLine: {
                        lineStyle: {
                        color: '#235894'
                        }
                    },
                    data: [
                        { 
                            value: parseInt((state.diskInfo ? (state.diskInfo.volumes[0].space.available / 1024 / 1024) : 0)), 
                            name: '空闲',  
                            itemStyle: {
                                opacity: 0.7,
                                color: '#3975c6',
                                borderWidth: 3,
                                borderColor: '#235894'
                            }
                        },
                        { 
                            value: parseInt((state.diskInfo ? (state.diskInfo.volumes[0].space.used / 1024 / 1024) : 0)), 
                            name: '已使用',
                            itemStyle: {
                                opacity: 0.7,
                                color: '#f36c6c',
                                borderWidth: 3,
                                borderColor: '#235894'
                            }
                        }
                    ],
                }
            ]
            }
        })

        watch(() => state.curDiskId, ()=> {
            state.diskInfo = allDiskInfo[state.curDiskId];
            console.log(state.diskInfo);
        });

        async function getDiskInfo() {
            allDiskInfo = await window.send['getDiskInfo']('getDiskInfo');
            state.curDiskId = '';

            state.diskIds = [];
            let keys = Object.keys(allDiskInfo);
            for (let i = 0; i < keys.length; i++) {
                if (state.curDiskId === '')
                    state.curDiskId = keys[i];
                
                console.log(keys[i], allDiskInfo[keys[i]]);
                state.diskIds[i] = { id: keys[i], total: parseInt(allDiskInfo[keys[i]].volumes[0].space.total / 1024 / 1024 / 1024) };
            }
        }

        return {
            ...toRefs(state),
            getDiskInfo,
            echartOption
        };
    },
};
</script>

<style lang="scss" scoped>
.diskinfo-main {
    background: #f6f6f7;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    -webkit-app-region: drag;

    .chart {
        flex: 1;
        .diskinfo-chart {
            -webkit-app-region: no-drag;
        }
    }

    .disklist {
        height: 80px;
        display: flex;
        justify-content: center;  
        align-items: center; 

        span {
            -webkit-app-region: no-drag;
            display: inline-block;
            width: 120px;
            height: 40px;
            background: #3975c6;
            margin-left: 40px;
            border-radius: 5px;
            color: #fdfeff;
            display: flex;
            justify-content: center;  
            align-items: center; 

            &:hover {
                background: #4c83cc;
            }

            &.active {
                background: #f49697;
                color: #f1f1f1;
            }
        }
    }
}
</style>

